<template>
  <view class="login">
    <image src="../../static/imgs/Rectangle 200.png" mode=""></image>
    <view class="login_content">
      <view class="title">注册</view>

      <!-- 账号登录 -->
      <view class="zhlogin">
        <view class="zhlogin_title">账号注册</view>
        <view class="zhlogin_xcx">开芯网商城小程序端</view>

        <u-field v-model="mobile" label="手机号" placeholder="请输入手机号">
        </u-field>
        <u-field v-model="code" label="验证码" placeholder="请输入验证码">
          <u-button size="mini" slot="right" type="success" @click="getCode">{{codeText}}</u-button>
        </u-field>
        <!-- <u-verification-code ref="uCode" @change="codeChange"></u-verification-code> -->
        <u-field v-model="password" type='password' label="密码" placeholder="请输入密码">
        </u-field>
        <u-field v-model="passwords" label="验证密码" placeholder="请确认密码">
        </u-field>

        <button class="button">注册</button>

        <view class="specification">
          <radio value="radio" />
          <text>登陆前详细阅读</text>
          <text class="agreement">《开芯网用户协议》</text>
          <text>和</text>
          <text class="agreement">《隐私协议》</text>
        </view>

      </view>
    </view>
  </view>

</template>

<script>
  import 'uview-ui/index.scss';
  import {
    request
  } from "@/request/index.js"
  import regeneratorRuntime from '@/lib/runtime/runtime';
  import {
    login
  } from "@/utils/asyncWx.js"
  export default {
    data() {
      return {
        radio: '', // 按钮
        mobile: '', // 手机号
        code: '', // 验证码
        password: '', // 密码
        passwords: '', // 确认密码
        codeText: '获取验证玛'
      }
    },
    methods: {
      // codeChange(text) {
      //   this.codeText = text;
      // },
      getCode() {
        if (this.$refs.uCode.canGetCode) {
          // 模拟向后端请求验证码
          uni.showLoading({
            title: '正在获取验证码'
          })
          setTimeout(() => {
            uni.hideLoading();
            // 通知验证码组件内部开始倒计时
            this.$refs.uCode.start();
          }, 1000);
        } else {
          this.$u.toast('倒计时结束后再发送');
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  page {
    background: white !important;
  }

  ::v-deep .u-field.data-v-578c626d {
    padding: 33rpx 0rpx;
  }

  .login {
    position: relative;

    >image {
      width: 100%;
      height: 550rpx;
    }
  }

  .login_content {
    position: absolute;
    top: 108rpx;
    width: 100%;
  }

  .title {
    width: 100%;
    text-align: center;
    font-size: 34rpx;
    margin-bottom: 100rpx;
    // margin-top: 108rpx;
  }

  // 账号登陆
  .zhlogin {
    padding: 50rpx;

    .zhlogin_title {
      font-size: 48rpx;
      font-weight: bold;
      color: #333333;
      margin-bottom: 22rpx;
    }

    .zhlogin_xcx {
      font-size: 24rpx;
      font-weight: 500;
      color: #666666;
      margin-bottom: 80rpx;
    }

    .data-v-b237504c .u-border-bottom {

      padding: 20rpx 0;
    }

    // 说明书
    .specification {
      margin-top: 34rpx;
      margin-bottom: 40rpx;

      radio {
        // vertical-align: middle;
        margin-right: 20rpx;
      }

      >text {
        font-size: 24rpx;
        font-weight: 400;
        color: #333333;
        line-height: 24rpx;
      }

      .agreement {
        color: #3369FF;
      }
    }

    .button {
      margin-top: 80rpx;
      width: 650rpx;
      height: 84rpx;
      color: #FFFFFF;
      background: #3369FF;
      border-radius: 42rpx 42rpx 42rpx 42rpx;
    }


  }
</style>